<template>
  <div class="app-container">

    <el-tabs v-model="type" type="border-card" @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in options" :key="index" :label="item.label">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="22">
            <el-table
              v-loading="loading"
              :data="datas"
              :height="height"
              style="width: 100%"
              border
              @sort-change="sort"
            >
              <el-table-column prop="id" label="编号" min-width="100" sortable="custom" />
              <el-table-column prop="name" label="模板名称" min-width="100" show-overflow-tooltip />
              <el-table-column prop="content" label="内容" min-width="100" show-overflow-tooltip />

              <el-table-column label="操作" min-width="160" align="right" fixed="right">
                <template slot-scope="{ row }">
                  <el-button size="mini" type="primary" @click="editOperation(row)">修改</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <pagination
              v-show="count > 0"
              :total="count"
              :page.sync="query.page"
              :limit.sync="query.limit"
              @pagination="list"
            />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="22">
        <el-button class="filter-item" type="primary" @click="save()">保存</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {
  list
} from '@/api/admin/speech-template'
import pagination from '@/components/Pagination'

export default {
  name: 'SignAccount',
  components: {
    pagination
  },
  data() {
    return {
      dblRowdata: [],

      loading: false,
      height: 650,
      datas: []
    }
  },
  created() {
    this.query.type = 1
    this.list()
  },
  methods: {
    handleClick(tab) {
      console.log(parseInt(tab.index) + 1)
      this.query.type = parseInt(tab.index) + 1
      this.list()
    },
    // 列表
    list() {
      this.loading = true
      list(this.query).then(res => {
        this.datas = res.data.list
        this.count = res.data.count
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    reset() {
      this.form = this.$options.data().form
      if (this.$refs['ref'] !== undefined) {
        this.$refs['ref'].resetFields()
      }
    },
    // 排序
    sort(sort) {
      this.query['sort_field'] = sort.prop
      this.query['sort_value'] = ''
      if (sort.order === 'ascending') {
        this.query['sort_value'] = 'asc'
        this.list()
      }
      if (sort.order === 'descending') {
        this.query['sort_value'] = 'desc'
        this.list()
      }
    },
    // 查询
    search() {
      this.query.page = 1
      this.list()
    },
    // 刷新
    refresh() {
      this.query = this.$options.data().query
      this.list()
    }
  }
}
</script>

<style>
</style>
